<!-- ？？？ -->

<template>
  <div
      style="display: flex; justify-content: space-between;margin-top: 80px;margin-bottom: 100px ;padding-left: 40px; padding-right: 50px;">

    <div style="width: 48%;background-color: whitesmoke;">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="纠错内容">
          <el-input type="textarea" v-model="form.text" :rows="10"></el-input>
        </el-form-item>
        <el-form-item class="horizontal-form-item">
          <div style="display: flex">
            <el-button type="primary" @click="onSubmit" style="margin-right: 10px;height: 40px">开始智能纠错</el-button>
            <el-button @click="clearText()" class="ml-10" style="margin-right: 10px;height: 40px">清空文本</el-button>
          </div>
          <div style="display: flex;margin-top: 10px">
          <el-upload
              class="upload-demo mr-10"
              action="http://localhost:8081/file/uploadHandWrite"
              multiple
              :on-success="res=>uploadSuccess(res.data)">
            <el-button type="primary">识别手写文字</el-button>
          </el-upload>
          <el-upload
              class="upload-demo mr-10"
              action="http://localhost:8081/file/uploadNormal"
              multiple
              :on-success="res=>uploadSuccess(res.data)">
            <el-button type="primary">识别非手写文字</el-button>
          </el-upload>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div style="width:50%;display: grid; grid-template-rows: auto auto;">
      <el-card style="height: 400px">
        <strong>纠错结果</strong>
        <el-table
            :data="combined"
            style="width: 100%">
          <el-table-column
              label="错误原因"
              width="180">
            <template slot-scope="scope">
              {{ scope.row[4] }}
            </template>
          </el-table-column>
          <el-table-column
              prop="data2"
              label="错误位置"
              width="180">
            <template slot-scope="scope">
              {{ scope.row[0] }}
            </template>
          </el-table-column>
          <el-table-column
              prop="data3"
              label="错误点"
              width="180">
            <template slot-scope="scope">
              {{ scope.row[1] }}
            </template>
          </el-table-column>
          <el-table-column
              prop="data4"
              label="修改建议"
              width="180">
            <template slot-scope="scope">
              {{ scope.row[2] }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>


  </div>
</template>
<script>
export default {
  data() {
    return {
      pol: [],
      char: [],
      word: [],
      redund: [],
      miss: [],
      order: [],
      dapei: [],
      punc: [],
      idm: [],
      org: [],
      leader: [],
      number: [],
      addr: [],
      name: [],
      grammar_pc: [],
      combined: [], // 合并后的数组
      form: {
        text: ''
      },
    }
  },
  methods: {
    clearText() {
      this.form.text = ''
    },
    uploadSuccess(data) {
      this.form.text = ''
      this.form.text = data
    },
    onSubmit() {
      this.sendDataToServertext();
    },
    async sendDataToServertext() {
      try {
        // 准备发送的数据
        const dataToSend = {
          text: this.form.text, // 表单
        };
        // 发送 POST 请求到端口 8081
        const response = await fetch('http://localhost:8081/text_correction', {
          method: 'POST', // 注意这里改为 POST 请求
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(dataToSend)
        });

        // 解析服务器返回的响应数据
        const data = await response.json();

        console.log('从服务器接收到的信息：', data);//接收

        this.pol = data.data.pol
        this.pol = this.pol.map(subArray => {
          return [...subArray, '政治术语纠错']
        })
        this.char = data.data.char
        this.char = this.char.map(subArray => {
          return [...subArray, '错别字纠错']
        })
        this.word = data.data.word
        this.word = this.word.map(subArray => {
          return [...subArray, '错别词纠错']
        })
        this.redund = data.data.redund
        this.redund = this.redund.map(subArray => {
          return [...subArray, '语法错误-冗余']
        })
        this.miss = data.data.miss
        this.miss = this.miss.map(subArray => {
          return [...subArray, '语法错误-缺失']
        })
        this.order = data.data.order
        this.order = this.order.map(subArray => {
          return [...subArray, '语法错误-乱序']
        })
        this.dapei = data.data.dapei
        this.dapei = this.dapei.map(subArray => {
          return [...subArray, '搭配纠错']
        })
        this.punc = data.data.punc
        this.punc = this.punc.map(subArray => {
          return [...subArray, '标点纠错，' + subArray[3]]
        })
        this.idm = data.data.idm
        this.idm = this.idm.map(subArray => {
          return [...subArray, '成语纠错']
        })
        this.org = data.data.org
        this.org = this.org.map(subArray => {
          return [...subArray, '机构名纠错']
        })
        this.leader = data.data.leader
        this.leader = this.leader.map(subArray => {
          return [...subArray, '职称纠错']
        })
        this.number = data.data.number
        this.number = this.number.map(subArray => {
          return [...subArray, '数字纠错']
        })
        this.addr = data.data.addr
        this.addr = this.addr.map(subArray => {
          return [...subArray, '地址纠错']
        })
        this.name = data.data.name
        this.name = this.name.map(subArray => {
          return [...subArray, '人名纠错']
        })
        this.grammar_pc = data.data.grammar_pc
        this.grammar_pc = this.grammar_pc.map(subArray => {
          return [...subArray, '句式杂糅&语义重复']
        })

        this.combined = this.pol.concat(this.char, this.word, this.redund, this.miss, this.order, this.dapei, this.punc, this.idm, this.org, this.leader, this.number, this.addr, this.name, this.grammar_pc)

      } catch (error) {
        // 处理错误
        console.error('发送数据时出错：', error);
      }
    },
  }
}
</script>
<style>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.horizontal-form-item {
  display: flex;
  align-items: center; /* 如果需要垂直居中 */
}

.mr-10 {
  margin-right: 10px; /* 根据需要调整间距 */
}

.ml-10 {
  margin-left: 10px; /* 清空文本的按钮左侧间距 */
}

</style>
